<template>
  <div class="pad5">
    <mu-paper :z-depth="3">
      <div class="flrc pad5">
        <div class=" fwb padl10">{{ title }}管理</div>
        <div class="padl10">
          <mu-button class="mar1" color="primary" tag="button" to="edit" v-if="!useModal">
            <mu-icon left value="add"></mu-icon>
            新增
          </mu-button>
          <mu-button class="mar1" color="primary" @click="openEdit" v-if="useModal">
            <mu-icon left value="add"></mu-icon>
            新增
          </mu-button>
          <mu-button class="mar1" color="primary" @click="refresh">
            <mu-icon left value="refresh"></mu-icon>
            刷新
          </mu-button>
          <mu-button class="mar1" color="primary" @click="copy">
            <mu-icon left value="add_to_photos"></mu-icon>
            复制
          </mu-button>
          <mu-button class="mar1 c11" color="warning" @click="removeAll">
            <mu-icon left value="close"></mu-icon>
            删除
          </mu-button>
        </div>
        <div class="padl10" v-if="searchOpen">
          <mu-switch v-model="showSearch" label="高级搜索"></mu-switch>
        </div>
        <div class="padl10" v-if="editOpen">
          <mu-switch v-model="showEdit" label="批量编辑"></mu-switch>
        </div>
        <div class="flex1 padl20" v-if="sorts.length > 0">
          <EzSort @change="sort" v-bind:config="sorts"></EzSort>
        </div>
        <div class="bca005 tac padl10 padr10 round30">
          <mu-text-field placeholder="关键词查询" solo
                         v-model="searchText"
                         @focusin="focusSearch"
                         @focusout="focusSearch"
                         :class="{longger:isFocusSearch,short:!isFocusSearch}"
                         class="toggle-width"
                         action-icon="search"
                         :action-click="search"
          ></mu-text-field>
        </div>
      </div>
    </mu-paper>
    <div class="mart5">
      <mu-paper class="pad5" :z-depth="3">
        <div class="bca003 pad5" v-if="showSearch">
          <EzData v-model="conditions" :config="searchFormConfig" :items="searchFormConfig.items"
                  :key="searchFormUpdateKey"></EzData>
          <div class="tal">
            <mu-button small class="mar1" color="primary" @click="getList">
              <mu-icon left value="search"></mu-icon>
              查询
            </mu-button>
            <mu-button small class="mar1 c11" color="warning" @click="resetSearchBox">
              <mu-icon left value="replay"></mu-icon>
              重置
            </mu-button>
          </div>
        </div>
        <div class="bca003 pad5" v-if="showEdit">
          <EzData v-model="editData" :config="editFormConfig" :items="editFormConfig.items"
                  :key="editFormUpdateKey">
          </EzData>
          <div>
            <mu-button small class="mar1" color="primary" @click="edit">
              <mu-icon left value="search"></mu-icon>
              编辑
            </mu-button>
            <mu-button small class="mar1 c11" color="warning" @click="resetEditData">
              <mu-icon left value="replay"></mu-icon>
              重置
            </mu-button>
          </div>
        </div>

        <div class="mart10">
          <mu-data-table selectable checkbox select-all stripe :selects.sync="selected" :columns="headers"
                         height="540" :data="data" rowKey="id" :key="tableKey">
            <template slot-scope="scope">
              <td :align="col.align" v-for="col in headers" :key="`${scope.row.id}${col.name}`">
                <div :class="`ez-${col.align}`" v-if="col.name === '_actions'">
                  <div>
                    <mu-button color="primary" small icon tag="button"
                               :to="`edit?id=${scope.row.id}`" v-if="!useModal">
                      <mu-icon value="edit"></mu-icon>
                    </mu-button>
                    <mu-button color="primary" small icon @click="openEdit(scope.row.id)"
                               v-if="useModal">
                      <mu-icon value="edit"></mu-icon>
                    </mu-button>
                    <mu-button color="error" small icon @click="remove(scope.row.id)">
                      <mu-icon value="remove_circle"></mu-icon>
                    </mu-button>
                  </div>
                </div>
                <!--这个ID只是一个自定义的示例-->
                <div :class="`ez-${col.align}`" v-else-if="col.name === 'id'">{{ scope.row.id }}</div>
                <EzListViewer :class="`ez-${col.align}`" v-else :config="col" :row="scope.row"></EzListViewer>
              </td>
            </template>
          </mu-data-table>
        </div>
        <div class="flrc bc13 mart10 pad5">
          <div>每页</div>
          <div class="marl5">
            <mu-select solo v-model="limit" dense="" tags @change="getList(1)" style="width: 75px;">
              <mu-option v-for="size in pageSizeSet" :key="`${size}_p`" :label="`${size}`"
                         :value="size"></mu-option>
            </mu-select>
          </div>
          <div>条，&nbsp;共：<span class="">{{ total }}</span>条</div>
          <div class="flex1 marl20 tac">
            <mu-pagination circle raised :total="total" :current.sync="page" :page-size="limit"
                           @change="getList"></mu-pagination>
          </div>
          <div class="setting bcf round30"
               :class="{'setting-open':settingOpen,'setting-close':!settingOpen}">
            <div class="setting-open pad5 flex-r flex-start">
              <div>
                <mu-switch v-model="askBeforeDelete" label="删除询问"></mu-switch>
              </div>
              <div class="marl10" v-if="tableHeadCacheOpen">
                <mu-switch v-model="headerConfigOpen" label="列配置"></mu-switch>
              </div>
            </div>
          </div>
          <div>
            <mu-button :color="settingOpen?'primary':'grey500'" @click="settingOpen = !settingOpen" icon>
              <mu-icon value="settings"></mu-icon>
            </mu-button>
          </div>
        </div>
      </mu-paper>
      <div v-if="tableHeadCacheOpen">
        <mu-paper class="mart10 pad5" :z-depth="3" v-show="settingOpen && headerConfigOpen">
          <EzTableHeaderManager :cache-key="tableHeadCacheKey" :cached="tableHeadCacheOpen" :value="headers"
                                :org="headersOrg" @change="onHeaderConfigChange"></EzTableHeaderManager>
        </mu-paper>
      </div>
    </div>

    <!--        modal start-->
    <mu-dialog :open="showForm" scrollable :padding="32" :fullscreen.sync="fullScreenEdit">
      <mu-appbar color="primary">
        <div class="fs10">{{ title }}信息修改</div>
        <mu-button slot="left" icon @click="closeEdit">
          <mu-icon value="edit"></mu-icon>
        </mu-button>
        <mu-button slot="right" icon @click="fullScreenEdit = !fullScreenEdit">
          <mu-icon value="fullscreen_exit" v-if="fullScreenEdit"></mu-icon>
          <mu-icon value="fullscreen" v-if="!fullScreenEdit"></mu-icon>
        </mu-button>
        <mu-button slot="right" icon @click="saveInList">
          <mu-icon value="save"></mu-icon>
        </mu-button>
        <mu-button slot="right" flat @click="closeEdit">
          <mu-icon value="exit_to_app"></mu-icon>
        </mu-button>
      </mu-appbar>
      <div v-if="showForm">
        <edit ref="editor" :model-id="id" :is-comp="true" :base="base" @done="closeEdit"></edit>
      </div>
    </mu-dialog>
  </div>
</template>

<script>
import EzData from "@/comps/EzData";
import mixin_common from "./js/mixin_common";
import mixin_config from "./js/mixin_config";
import mixin_table from "./js/mixin_table";
import mixin_search from "./js/mixin_search";
import mixin_edit_many from "./js/mixin_edit_many";
import mixin_list from "./js/mixin_list";
import mixin_edit from "./js/mixin_edit";
import EzSort from "@/comps/list/EzSort";
import EzTableHeaderManager from "@/comps/list/EzTableHeaderManager";
import Edit from "./edit";
import EzListViewer from "@/comps/list/EzListViewer";

export default {
  name: "v1-__DIR__-__EN_NAME__-list", mixins: [
    mixin_common,
    mixin_config,
    mixin_search,
    mixin_edit,
    mixin_edit_many,
    mixin_table,
    mixin_list,
  ],
  components: {EzListViewer, Edit, EzTableHeaderManager, EzSort, EzData},
  data() {
    return {}
  },
  methods: {}
}
</script>

<style scoped>
.toggle-width {
  transition: width .3s;
}

.longger {
  width: 240px;
}

.short {
  width: 150px;
}

.setting {
  transition: width .3s;
  overflow: hidden;
}

.setting-close {
  width: 0;
}

.setting-open {
  width: 500px;
}
</style>